<script setup lang="ts">
import { putSuggestionAPI } from '@/api/suggestion';
import { useMemberStore } from '@/stores'
import { ref } from 'vue'
// 获取企业信息
const form = ref({
  title: '',
  content: '',
  userId: '',
})

// 定义校验规则
const rules: UniHelper.UniFormsRules = {
  title: {
    rules: [{ required: true, errorMessage: '请输入标题' }],
  },
  content: {
    rules: [{ required: true, errorMessage: '请输入内容' }],
  },
}
// 获取表单组件实例，用于调用表单方法
const formRef = ref<UniHelper.UniFormsInstance>()

const memberStore = useMemberStore()
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.()

    if (memberStore.profile) {
      form.value.userId = memberStore.profile.userId
      const res = await putSuggestionAPI(form.value)
      if (res.code == '0') {
        uni.showToast({ icon: 'success', title: res.data as string })
        setTimeout(() => {
          uni.redirectTo({ url: '/pages/login/login' })
        }, 1000)
      } else {
        uni.showToast({ icon: 'fail', title: '提交失败，请重新尝试' })
      }
    }
  } catch (error) {
    uni.showToast({ icon: 'error', title: '请填写完整信息' })
  }
}
</script>

<template>
  <view class="profile"> 感谢您的宝贵建议，我们将努力改进 </view>
  <!-- 表单 -->
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formRef" class="form">
      <!-- 表单内容 -->
      <uni-forms-item class="form-item" name="title">
        <text class="label">建议标题</text>
        <input class="input" placeholder="请填写" v-model="form.title" />
      </uni-forms-item>
      <uni-forms-item class="form-item image_upload" name="content">
        <text class="label">建议内容</text>
        <textarea class="textarea" v-model="form.content" placeholder="请填写"/>
      </uni-forms-item>
      <!-- 提交按钮 -->
      <button class="form-button" @tap="onSubmit">提交</button>
    </uni-forms>
  </view>
</template>

<style lang="scss" scoped>
.profile {
  padding: 60rpx 0 60rpx;
  position: relative;
  background-color: rgb(0, 206, 170);
  color: #fff;
  text-align: center;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 10px 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}

.form-button {
  height: 80rpx;
  margin: 60rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
